<template>
  <div class="tw-main tw-school-jxbox">
    <div class="screen">
      <el-row class="tw-grid tw-enrollment school-masse-box">
        <el-col :md="24" :lg="8" class="tw-grid__left">
          <tw-card
          :label="'教育阶段'"
          >
            <tw-chart
            :chartOption="line.chartOption"
            :dataset="line.dataset"
            :chartDataMaps="line.chartDataMaps"
            height='82vh'
          >
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :md="24" :lg="16" class="tw-grid__right" >
          <tw-card
          :label="'学校信息'"
          :flexFlag="true"
          >
            <div class="tw-box">
              <tw-map  @getSchoolData="mapSchool"  :mapWidth="'580px'"></tw-map>
            </div>
            <div class="right-school-box">
              <h2>{{currentSchoolName?currentSchoolName:'嘉兴市'}}</h2>
              <div class="teach-stu-boxMass">
                <div class="teach-box">
                  <div style="display:flex">
                    <div class="teach-img-box teach-stu-img-box">
                      <img src="../../assets/images/教师.png">
                    </div>
                    <div class="teach-sum-box">
                      <p>专任教师</p>
                      <p>{{mmSchoolDite.zrjssl?$reformNumber(mmSchoolDite.zrjssl):0}}人</p>
                    </div>
                  </div>
                </div>
                <div class="stu-box">
                  <div style="display:flex">
                    <div class="stu-img-box teach-stu-img-box">
                      <img src="../../assets/images/学生.png">
                    </div>
                    <div class="stu-sum-box">
                      <p>学生</p>
                      <p>{{mmSchoolDite.xssl?$reformNumber(mmSchoolDite.xssl):0}}人</p>
                    </div>
                  </div>
                </div>
              </div>
                <ul class="teach-mess-bigBox">
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/Teaching area.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>总用地面积(亩)</p>
                      <p>{{mmSchoolDite.sjjfzyfmj?$reformNumber(mmSchoolDite.sjjfzyfmj):0}}万平方米</p>
                      <p class="font-color">生均: {{mmSchoolDite.sjjfzyfmj?Math.round((mmSchoolDite.sjjfzyfmj/mmSchoolDite.xssl) * 100) / 100:0}}平方米</p>
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-体育运动馆.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>体育运动场馆面积</p>
                      <p>{{mmSchoolDite.tyydcgmj?$reformNumber(mmSchoolDite.tyydcgmj):0}}万平方米</p>
                      <p class="font-color">生均: {{mmSchoolDite.tyydcgmj?Math.round((mmSchoolDite.tyydcgmj/mmSchoolDite.xssl) * 100) / 100:0}}平方米</p>
                    </div>
                  </li>
                  <!-- <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-教室数量.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>教室数量</p>
                      <p>{{mmSchoolDite.jssl?$reformNumber(mmSchoolDite.jssl):0}}间</p>
                      <p class="font-color">生均: {{mmSchoolDite.jssl?Math.round((mmSchoolDite.jssl/mmSchoolDite.xssl) * 100) / 100:0}}间</p>
                    </div>
                  </li> -->
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-网络多媒体.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>网络多媒体教室数量</p>
                      <p>{{mmSchoolDite.wldmtjssl?$reformNumber(mmSchoolDite.wldmtjssl):0}}间</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.wldmtjssl?Math.round((mmSchoolDite.wldmtjssl/mmSchoolDite.xssl) * 100) / 100 :0}}间</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-教学仪器.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>教学仪器设备值</p>
                      <p>{{mmSchoolDite.jxyqsbz?$reformNumber(mmSchoolDite.jxyqsbz):0}}万元</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.jxyqsbz?Math.round((mmSchoolDite.jxyqsbz/mmSchoolDite.xssl) * 100) / 100 :0}}万元</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-计算机数量.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>计算机数量</p>
                      <p>{{mmSchoolDite.jsjsl?$reformNumber(mmSchoolDite.jsjsl):0}}台</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.jsjsl?Math.round((mmSchoolDite.jsjsl/mmSchoolDite.xssl) * 100) / 100:0}}台</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-图书数量.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>图书数量</p>
                      <p>{{mmSchoolDite.tssl?$reformNumber(mmSchoolDite.tssl):0}}册</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.tssl?Math.round((mmSchoolDite.tssl/mmSchoolDite.xssl)*100)/100:0}}册</p> -->
                    </div>
                  </li>
                </ul>
            </div>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwChart from '@/components/TwChart.vue'
// import TwMap from '@/components/TwMap.vue'
import TwMap from '@/components/tw-map/TwMap.vue'
// import TwEcharts from '@/components/TwEcharts.vue'
export default{
  components: {
    TwCard,
    TwChart,
    TwMap
  },
  created () {
  },
  props: [],
  data () {
    return {
      currentSchoolName: '',
      mmSchoolDite: {},
      // 地图模拟数据
      mmmData: [],
      additionalOptions: {
        echarts_businessData: {},
        echarts_dataChangeMonitoring: {}
      },
      line: {
        chartOption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: false,
            top: '0%',
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '8%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 16,
                color: '#fff'
              },
              splitNumber: 3
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisLabel: {
                interval: 0,
                fontSize: 16
              },
              splitLine: {
                show: false
              },
              data: []
            }
          ],
          series: []
        },
        chartDataMaps: [],
        dataset: []
      }
    }
  },
  mounted () {
    this.schoolTypeSumInit()
    this.mapSchool()
  },
  methods: {

    // 接收点击地图学校的参数
    mapSchool (params) {
      let jgid = params ? params.data.jgid : '01'
      this.currentSchoolName = params ? params.name : ''
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xxxx_xxzbxx?jgid=` + jgid).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          this.mmSchoolDite = pageInfo.list[0]
        }
      })
    },

    // 学校类型数量统计
    schoolTypeSumInit () {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xxxx_xxlxsltj?tjnf=2019`).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let schoolList = []
          let xMaxList = []
          let xAxis = this.line.chartOption.xAxis
          let toolTipS = this.line.chartOption.tooltip
          let schoolDataMaps = [{
            dataKey: 'value',
            name: '教育阶段机构'
          }]
          pageInfo.list.forEach(item => {
            schoolList.unshift({
              name: item.jyjd === '其中：调整后中等职业学校' ? '中等职业学校' : item.jyjd,
              value: item.xxsl
            })
            xMaxList.push(item.xxsl)
          })
          xMaxList = xMaxList.sort((a, b) => { return a - b }) // 数组排序取出最大值
          xAxis[0].max = xMaxList[xMaxList.length - 1] + 10
          toolTipS.formatter = (params) => {
            let res = ''
            res += params[0].marker + params[0].name + ': ' + params[0].value + '所'
            return res
          }
          let colors = ['#40bfff', '#91dcf2', '#fb6c84', '#ffb686', '#a694ff', '#7e73ff', '#4c6aff', '#11c9aa', '#8le6b3', '#ffe666', '#00e2fe', '#1890ff', '#a694ff', '#7e73ff', '#4c6aff']
          this.line.dataset = schoolList
          this.line.chartDataMaps = schoolDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              colors: colors,
              label: {
                normal: {
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                barBorderRadius: [0, 5, 5, 0]
              },
              emphasis: {
                itemStyle: {
                  color: colors[index]
                }
              },
              barMaxWidth: 22
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tw-grid__right{

}
.right-school-box{
  padding:28px 56px 0 0 ;
  min-width: 690px;
  max-width: 690px;
  height: 850px;
  width: 100%;

  h2{
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    color: #00e2fe;
  }

  .teach-stu-boxMass{
    color: #ffffff;
    display: flex;
    margin-top: 24px;
    .teach-box,.stu-box{
      flex: 1;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      p{
        margin: 0;
        font-size: 22px;
      }
    }
    .teach-stu-img-box{
      padding-top:10px ;
      margin-right: 10px;
    }
  }

  .teach-mess-bigBox::after{
    content: " ";
    display: block;
    clear: both;
  }

  .teach-mess-bigBox{
    min-width: 684px;
    margin-top: 30px;
    .img-box{
      width: 114px;
      min-height: 114px;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 116px;
      }
    }
    .teach-mess-listBox{
      display: flex;
    }
    .mess-listBox{
      height: 100%;
      margin-top: 10px;
      font-size: 18px;
      color: #ffffff;
    }
  }

  .teach-mess-listBox{
    min-height: 114px;
    min-width: 300px;
    border-radius: 10px;
    float: left;
    white-space: nowrap;
    margin-bottom: 30px;
    margin-right: 30px;
    background: linear-gradient(left,#0065fb,rgba(0,36,110,0.3));
  }
  .font-color{
    color: #05fdfd;
  }
}
.tw-school-jxbox{
  overflow-x: hidden;
}
</style>
